<template>
  <div class="custom-manage">
    <el-card>
      <h3>
        历史订单<el-button type="primary" size="small" @click="open" style="margin-right: 50px;"
        v-if="this.$route.path.includes('/admin/')">数据导出</el-button>
        <el-button type="primary" icon="el-icon-search" size="small" circle @click="search"></el-button>
      </h3>
      <el-table style="width: 100%" :data="userList.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border
        :cell-style="cellStyle">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="序号" type="index" :index="indexMethod" width="80"></el-table-column>
        <el-table-column prop="imgUrl" label="用户头像" width="120">
          <template slot-scope="scope">
            <img :src="scope.row.imgUrl" alt="" style="width: 100%;height: 50px;">
          </template>
        </el-table-column>
        <el-table-column prop="nickname" label="姓名" width="120"> </el-table-column>
        <el-table-column prop="vipType" label="vip等级" width="80"> </el-table-column>
        <el-table-column prop="telephone" label="手机号码" width="120"> </el-table-column>
        <el-table-column prop="sex" label="性别" width="80"> </el-table-column>
        <el-table-column prop="durationDay" label="居住时间" width="110"> </el-table-column>
        <el-table-column prop="checkInTime" label="开始日期" width="180"> </el-table-column>
        <el-table-column prop="checkOutTime" label="截止日期" width="180"> </el-table-column>
        <el-table-column prop="status" label="状态" width="80"> </el-table-column>
        <!-- <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="primary" size="small" icon="el-icon-edit" circle
              @click="editUser(scope.row.orderId, scope.row.idCard, scope.row.state)"></el-button> -->
        <!-- <el-button type="danger" size="small" circle icon="el-icon-delete"
              @click="deleteUser(scope.row.orderId)"></el-button> -->
        <!-- </template> -->
        <!-- </el-table-column> -->
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { guestsForOrderStatusHistory } from '@/api/user'

export default {
  name: 'MemberManage',
  data() {
    return {
      currentPage: 1, //当前页
      total: 0, //总条数
      pageSize: 5, //当前页容量
      pageSizes: [],
      userList: []
    }
  },

  created() {
    for (let i = 0; i < 5; i++) {
      this.pageSizes.push(5 * (i + 1))
    }
    this.fetchData()
  },
  methods: {
    //切换每页条数容量
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.fetchData();
    },
    //切换当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    fetchData() {
      guestsForOrderStatusHistory().then(res => {
        this.userList = res
        this.total = res.length
        for (let i = 0; i < this.userList.length; i++) {
          const options = { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' }
          // this.userList[i].imgUrl = process.env.VUE_APP_IMG_PREFIX + this.userList[i].imgUrl
          this.userList[i].durationDay = this.calculateTimeDifference(this.userList[i].checkInTime, this.userList[i].checkOutTime)
          this.userList[i].checkInTime = new Date(this.userList[i].checkInTime).toLocaleDateString(undefined, options)
          this.userList[i].checkOutTime = new Date(this.userList[i].checkOutTime).toLocaleDateString(undefined, options)
        }
      })
    },
    search() {
      this.$prompt('请输入手机号搜索', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        for (let i = 0; i < this.userList.length; i++) {
          if (this.userList[i].telephone === value) {
            this.$message({
              type: 'success',
              message: '搜索到该会员'
            })
            this.userList = [this.userList[i]]
            return
          }
        }
        this.$message({
          type: 'error',
          message: '没有搜索到该会员'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
      })
    },
    calculateTimeDifference(startTime, endTime) {
      // 将时间戳转换为毫秒
      let start = new Date(startTime).getTime();
      let end = new Date(endTime).getTime();

      // 计算时间差的毫秒数
      let difference = end - start;

      // 计算相差的天数、小时、分钟和秒数
      let days = Math.floor(difference / (24 * 3600 * 1000));
      let leave1 = difference % (24 * 3600 * 1000);
      let hours = Math.floor(leave1 / (3600 * 1000));
      let leave2 = leave1 % (3600 * 1000);
      let minutes = Math.floor(leave2 / (60 * 1000));
      let leave3 = leave2 % (60 * 1000);
      let seconds = Math.round(leave3 / 1000);

      // return `${days}天 ${hours}小时 ${minutes}分钟 ${seconds}秒`;
      return `${days}天 ${hours}小时`;
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (column.property === 'vipType') {
        switch (row.vipType) {
          case '黄金':
            return { color: '#FFD700', fontWeight: 'bold' }; // 金色
          case '白银':
            return { color: '#C0C0C0', fontWeight: 'bold' }; // 银色
          case '青铜':
            return { color: '#CD7F32', fontWeight: 'bold' }; // 铜色
          case '铂金':
            return { color: '#008899', fontWeight: 'bold' }; // 铂金色
          case '钻石':
            return { color: '#0094c8', fontWeight: 'bold' }; // 钻石色
          default:
            return {};
        }
      }
      return {};
    },
    indexMethod(index) {
      return index + 1 + (this.currentPage - 1) * this.pageSize;
    },
    open() {
      window.open(process.env.VUE_APP_BASE_URL + '/excel/history/export')
    },
  }
}
</script>

<style lang="less" scoped>
.custom-manage {
  display: flex;
  justify-content: center;
}

.el-card {
  display: flex;
  flex-direction: column;
  width: 94%;
  margin: 20px 0;

  h3 {
    position: relative;
    height: 35px;

    .el-button {
      position: absolute;
      right: 10px;
      top: 5;
    }
  }

  .el-table {
    width: 100%;
    text-align: center;

    .el-table-column {
      text-align: center;
    }
  }
}

.el-pagination {
  margin: 10px 0 10px 300px;
}
</style>
